import React,{useMemo} from 'react'
import { Button } from 'antd-mobile'
import { useNavigate ,NavLink,Link} from 'react-router-dom'
import './my.scss'
import { store } from '../../store'
import {ShopbagOutline,RightOutline,TruckOutline,MessageOutline,ReceiptOutline,LocationFill,ForbidFill,PhoneFill,TeamFill,KoubeiFill,LockFill,ExclamationShieldFill} from 'antd-mobile-icons'
import { IPath } from '../../interface'
import MySuggest from '../../component/mySuggest'
import { useDispatch,useSelector } from 'react-redux'
import { SET_ORDER_TAB } from '../../store/actionType'

export default function My() {
  const user = store.getState().userReducer.user
  const { token, _id } = store.getState().userReducer.user
  const isLogin = useMemo(() => token, [token])
  const dispatch = useDispatch()
  const {tabReducer} = useSelector((state:any)=> state)
console.log(tabReducer.changeSet)
  const navigate = useNavigate()
  return (
    <div className='body'>
      <div className='head'>
        <div className='Message'>
          <div className='MessageImg'>
            {
              isLogin? <img src={user.author_img} alt="" />:<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2" alt="" />
            }
            <h1>{user.username}</h1>
          </div>
          {
            isLogin? <Button style={{border:"1px solid #a5a5a5",fontSize:"10px",borderRadius:'16px' , marginTop:'10px'}} onClick={() => navigate('/edit')}>编辑资料</Button>:<Button style={{border:"0px",fontWeight:"600",fontSize:"20px"}} onClick={() => navigate('/login')}>立即登录</Button>
          }
          
        </div>

        <div className='MessageButtom'>
          <div>
            <h3>0.0</h3>
            <p><NavLink to={'/fruit'}>果实币</NavLink></p>
          </div>
          <div>
            <h3>0</h3>
            <p><NavLink to={'/coupon'}>优惠劵</NavLink></p>
          </div>
        </div>
      </div>

      <div className='main'>
        <div className='order'>
          <p>
            <span>我的订单</span>
            <span onClick={()=>(navigate('/order'),dispatch({type:SET_ORDER_TAB,payload:0}))}>查看全部<RightOutline /></span>
          </p>

          <div className='mainButtom'>
              <div>
                <i><ShopbagOutline /></i>
                <p onClick={()=>(navigate('/order'),dispatch({type:SET_ORDER_TAB,payload:1}))}>待付款</p>
              </div>
              <div>
                <i><TruckOutline /></i>
                <p onClick={()=>(navigate('/order'),dispatch({type:SET_ORDER_TAB,payload:2}))}>待送达</p>
              </div>
              <div>
                <i onClick={()=>(navigate('/order'),dispatch({type:SET_ORDER_TAB,payload:3}))}><MessageOutline /></i>
                <p>待评价</p>
              </div>
              <div>
                <i onClick={()=>(navigate('/order'),dispatch({type:SET_ORDER_TAB,payload:4}))}><ReceiptOutline /></i>
                <p>售后/退款</p>
              </div>
          </div>

        </div>
      </div>


      <div className='tool'>
        <p>我的工具</p>
        <div className='tooler'>
          <div>
            <i><LocationFill /></i>
            <p><NavLink to={'/address'}>收货地址</NavLink></p>
          </div>
          <div>
            <i><ForbidFill /></i>
            <p>面包卡</p>
          </div>
          <div>
            <i><PhoneFill /></i>
            <p><a href={'tel:' + 17607829943}>客服电话</a></p>
          </div>
          <div>
            <i><TeamFill /></i>
            <p><NavLink to={'/service'}>在线客服</NavLink></p>
          </div>
        </div>
        <div className='toolcon'>
        <div>
            <i><KoubeiFill /></i>
            <p>社区</p>
          </div>
          <div>
            <i><LockFill /></i>
            <p><NavLink to={'/set'}>设置</NavLink></p>
          </div>
        </div>

      </div>

      <div className='gengduo'>
          --更多推荐--
      </div>
      

      <div className='details'>
        {
          tabReducer.changeSet && <MySuggest></MySuggest>
        }
      </div>
      

    </div>
  )
}
